<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<navBar slot="top" title="办事指南" />
			<!-- <view class="item" v-for="(item,index) in dataList" :key="index" v-if="Array.isArray(dataList) && dataList.length>0">
				<view class="title">{{item.theme}}</view>
				<view class="line"></view>
				<view class="stepView">
					<u-steps current="-1" direction="column" inactive-color="#247BFD">
						<u-steps-item :title="item2.title" v-for="(item2,index2) in item.list" :key="index2">
							<text class="slotIconText" slot="icon">{{index2+1}}</text>
						</u-steps-item>
					</u-steps>
				</view>
			</view> -->
			<view class="itemView" v-for="(item, index) in dataList" :key="index" @click="itemHandle(item)">
				<view class="itemTitle">
					<view style="color: #000000;font-size: 16px;font-weight: bold;">{{item.theme}}</view>
				</view>
				<text style="font-size: 12px;color: #999999;padding-left: 10px;margin-bottom: 8px;">{{item.createdAtView}}</text>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import navBar from "@/components/nav_bar.vue"
	import workGuide from '@/api/workGuide.js'
	export default{
		components:{
			navBar
		},
		data(){
			return {
				dataList:[],
			}
		},
		mounted() {
			// this.listRequest()
		},
		methods:{
			queryList(pageNo, pageSize) {
				workGuide.listHandle({page:pageNo,size:pageSize}).then(res =>{
					let records = res.records;
					for(let i=0;i<records.length;i++){
						let dataList = [];
						dataList = JSON.parse(records[i].content)
						records[i]['list'] = dataList
					}
					if(pageNo==1){
						this.dataList = records;
					}else{
						this.dataList.concat(records)
					}
					this.$refs.paging.complete(res.records);
				}).catch(error =>{
					this.$refs.paging.complete(false);
				})
			},
			itemHandle(item){
				uni.navigateTo({
					url: '/packageHome/pages/carbonNeutrality/detail?id='+item.id+"&sourceType=3"
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.itemView{
	display: flex;
	flex-direction: column;
	width: 100vw;
	width: calc(100vw - 32px);
	border-radius: 12px;
	margin-left: 16px;
	// padding: 12px;
	background-color: white;
	margin-top: 8px;
	.itemTitle{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
	}
	.itemContent{
		padding: 0 12px 12px 12px;
		// font-size: 12px;
	}
}
.item{
	width: calc(100vw - 32px);
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background-color: white;
	margin-left: 16px;
	margin-top: 8px;
	.title{
		height: 54px;
		width: calc(100vw - 32px);
		display: flex;
		align-items: center;
		padding-left: 16px;
	}
	.line{
		height: 0.5px;
		background-color: #F7F7F7;
		width: calc(100vw - 32px);
	}
	.stepView{
		padding: 16px;
	}
	.slotIconText{
		width: 21px;
		height: 21px;
		background-color: #247BFD;//$u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
}
</style>